{% extends "base.html" %}

{% block title %}床位信息{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/bed_infomation.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="/static/js/bed_information.js"></script>
{% endblock %}

{% block content %}
<div class="main-content">
    <!-- 筛选区域 -->
    <div class="filter-section">
        <div class="filter-item">
            <label><i class="fas fa-hospital-alt"></i> 科室：</label>
            <select id="department-select" onchange="updateWardOptions()">
                <option value="">全部科室</option>
            </select>
        </div>
        <div class="filter-item">
            <label><i class="fas fa-door-open"></i> 病区：</label>
            <select id="ward-select" onchange="loadBedInfo()">
                <option value="">全部病区</option>
            </select>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
        <div class="stat-item">
            <i class="fas fa-bed"></i>
            <span class="stat-label">总床位数：</span>
            <span id="total-beds">0</span>
        </div>
        <div class="stat-item">
            <i class="fas fa-procedures"></i>
            <span class="stat-label">已使用：</span>
            <span id="used-beds">0</span>
        </div>
        <div class="stat-item">
            <i class="fas fa-chart-pie"></i>
            <span class="stat-label">使用率：</span>
            <span id="usage-rate">0%</span>
        </div>
    </div>

    <!-- 床位展示区域 -->
    <div class="beds-container">
        <div id="beds-grid" class="beds-grid">
            <!-- 床位将通过JavaScript动态添加 -->
        </div>
    </div>
</div>
{% endblock %}
